<script>
import Psd from '@/views/system/password'
import Menus from '@/components/menu'
import menu from '@/router/menu'
import Personal from '@/views/system/accountwrite'
import defaulthead from '@/assets/head.png'
export default({
	components: {
		Psd,Menus,Personal
	},
	data(){
		return {
			menu:menu,
			selectedKeys1:['2'],
			selectedKeys2:['1'],
			collapsed:false,
			openKeys:['sub1'],
			defaulthead,
			realoading:false,
		}
	},
	created(){
		// console.log(Icon)
		// console.log(this.menu)
	},
	mounted(){
		console.log('layout mounted')
		// this.$refs.psn.show(true,{modself:2})
		this.$nextTick(()=>{
			// 待开发  完成密码修改后需要更新状态信息
			setTimeout(()=>{
				if(this.$store.state.user.hasetpwd==2){
					this.$nextTick(async ()=>{
						await this.$showfirm('您有必要修改登录密码');
						this.$refs.psdw.show(true);
					});
				}
			},1000)
		})
		this.getnum();
	},
	methods:{
		loginout(){
			this.$store.dispatch('saveUser',null);
			// this.$router.push('/login');
		},//退出
		reloadpage(){
			// 待开发： 当前路由只进行了参数载入并未进行刷新
			// this.$router.push(this.$router.currentRoute.value.path+'?time='+new Date().getTime());
			// location.reload();
			this.realoading=true;
			this.$nextTick(()=>{
				this.realoading=false;
			})
		},
		test(){
			console.log(this.$refs.psdw.show(true,{id:2}))
		},
		async getnum(){
			if(this.listloading) return;
			this.listloading		=	true;
			let rs	=	await this.muajax.getnum();
			this.menu=rs.list;
		}
	},
	computed:{
		bread(){
			let title = this.$router.currentRoute.value.meta.title;
			document.title=title;
			let rt = this.$router.currentRoute.value.matched;
			return rt;
		}
	},
	watch:{

	}
});
</script>
<template>
	<!-- 修改密码 -->
	<Psd ref="psdw" />
	<!-- 个人信息 -->
	<Personal ref="psn" />
	<a-layout class="maxbox">
		<a-layout-header class="header">
			<div class="logo">
				管理控制台
			</div>
			<div class="flex1">
				<a-tooltip title="刷新">
					<span class="mp-l-15 mp-r-15 cursor" @click="reloadpage">
						<ReloadOutlined />
					</span>
				</a-tooltip>
				<a-tooltip title="主页">
					<span class="mp-l-15 mp-r-15 cursor" @click="reloadpage">
						<HomeOutlined />
					</span>
				</a-tooltip>
				<a-breadcrumb class="flexline mm-l-10 mm-r-20 bread">
					<a-breadcrumb-item v-for="(v,k) in bread">{{ k?v.meta.title:'首页' }}</a-breadcrumb-item>
					<!-- <a-breadcrumb-item>{{ title }}</a-breadcrumb-item> -->
				</a-breadcrumb>
				<!-- <a-menu
					class="flexline"
					theme="dark"
					mode="horizontal"
					v-model:selectedKeys="selectedKeys1"
					:style="{ lineHeight: '64px' }"
				>
					<a-menu-item key="1">nav 1</a-menu-item>
					<a-menu-item key="2">nav 2</a-menu-item>
					<a-menu-item key="3">nav 3</a-menu-item>
				</a-menu> -->
			</div>

			<a-menu theme="dark" mode="horizontal" class="rightuser" :selectable="false">
				<a-sub-menu @click="test">
					<template #icon>
						<img :src="$store.state.user?.head||defaulthead" class="userhead" alt="">
					</template>
					<template #title>{{ $store.state.user.username }}</template>
					<a-menu-item key="setting:2" @click="$refs.psdw.show(true)">
						<key-outlined />
						修改密码
					</a-menu-item>
					<a-menu-divider />
					<a-menu-item key="setting:3" @click="loginout()">
						<logout-outlined />
						退出登录
					</a-menu-item>
				</a-sub-menu>
			</a-menu>

		</a-layout-header>
		<a-layout>
			<a-layout-sider collapsible class="menuslide" width="230">
				<a-menu
				mode="inline"
				theme="dark"
				:inline-collapsed="collapsed"
				v-model:selectedKeys="selectedKeys2"
				v-model:openKeys="openKeys"
				>
					<!-- 暂时支持到三级吧 -->
					<Menus :menu="menu">
						<template #default="{child}">
							<Menus :menu="child">
								<template #default="{child}">
									<Menus :menu="child" />
								</template>
							</Menus>
						</template>
					</Menus>

					<!-- <a-menu-item >
						<BarChartOutlined />
						<span>数据看板</span>
						<router-link to="/brand"></router-link>
					</a-menu-item>
					<a-sub-menu key="sub1">
						<template #title>
							<RobotOutlined />
							<span>系统管理</span>
						</template>
						<a-menu-item key="1">
							<UserOutlined />
							<span>账号</span>
							<router-link to="/login"></router-link>
						</a-menu-item>
						<a-menu-item key="2">角色</a-menu-item>
						<a-menu-item key="3">菜单</a-menu-item>
						<a-menu-item key="4">
							<SettingOutlined />
							<span>配置</span>
							<router-link to="/index"></router-link>
						</a-menu-item>
					</a-sub-menu> -->
				</a-menu>
				<div style="height:100px;width:100%"></div>
			</a-layout-sider>
			<a-layout>
				<a-layout-content class="laycontent" >
					<page-header />
					<!-- <router-view /> -->
					<router-view v-slot="{Component}" v-if="!realoading">
						<!-- <transition name="router-fade" mode="out-in"> -->
							<keep-alive :include="['databoard']">
								<component :is="Component" />
							</keep-alive>
						<!-- </transition> -->
					</router-view>
				</a-layout-content>
			</a-layout>
		</a-layout>
	</a-layout>
</template>

<style lang="less" scoped>
.maxbox{
	height: 100%;
	.header{
		display: flex;
		color: #fff;
	}
	.logo{
		width: 150px;
		font-size: 20px;
		img{
			height: 30px;
		}
	}
	.bread{
		color:#fff;
		:deep(.ant-breadcrumb-separator){
			color:inherit;
		}
		&> span:last-child{
			color:inherit;
		}
	}
	.rightuser{
		.userhead{
			height: 30px;
			width: 30px;
			border-radius: 50%;
		}
	}
	.menuslide{
		height: 100%;
		overflow: auto;
	}
	.laycontent{
		padding: 15px;
		height: 100%;
		overflow: auto;
	}
}
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
</style>
